<template>
  <div class="exchangeBox">
    <div class="good">
      <div class="imgBoxs">
        <img
          :src="item.DefaultImage"
          alt=""
        >
      </div>
      <div class="detail">
        <div class="tls">
          {{ item.cProductName }}
        </div>
        <div class="price">
          ￥{{ item.fSalePrice }}
        </div>
        <!-- <div class="dls">
          订单详情
        </div> -->
      </div>
    </div>
    <div class="tabBox">
      <div>
        <el-form
          :inline="false"
          :label-position="labelPosition"
          label-width=""
          class="demo-form-inline"
        >
          <el-form-item label="我的订单:">
            {{ item.cOrderNo }}
          </el-form-item>
          <!-- <el-form-item label="退款原因:">
            地址错误不要了
          </el-form-item> -->
          <el-form-item label="退款金额:">
            ￥{{ item.fCanReturnMoney }}
          </el-form-item>
          <!-- <el-form-item label="退款说明:">
            地址错误不要了地址错误不要了地址错误不要了地址错误不要了地址错误不要了地址错误不要了地
          </el-form-item> -->
          <!-- <el-form-item label="快递公司:">
            中通速递
          </el-form-item>
          <el-form-item label="快递单号:">
            52284249872211
          </el-form-item> -->

          <!-- <el-form-item label="图片:">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{ file }"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  ><i class="el-icon-zoom-in" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  ><i class="el-icon-download" /></span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  ><i class="el-icon-delete" /></span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form-item> -->
          <!-- <el-form-item label="备注:">
            我是备注我是备注我是备注我是备注我是备注我是备注我是备注
          </el-form-item> -->
        </el-form>
        <!-- <div class="subBtn">
          发表
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      iDetailId: "",
      item: "",
    };
  },
  mounted() {
    this.iDetailId = this.$route.query.id;
    console.log('asas', this.iDetailId)
    if (this.iDetailId != "") {
      this.getReturnDetail();
    }
  },
  methods: {
    changeReason() {
      console.log(this.reason);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 获取退货详情
    getReturnDetail() {
      let params = {
        token: localStorage.getItem("token"),
        data: {
          iDetailId: this.iDetailId,
        },
      };
      this.$api.good.getReturnDetail(params).then((res) => {
        if (res.code == 200) {
          console.log('获取退货详情',JSON.parse(JSON.stringify(res.data)));
          this.item = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style>
.el-form-item__label {
  color: #333;
  font-size: 0.88rem;
}

.el-form-item__content {
  color: #666;
  font-size: 0.88rem;
}
</style>
<style scoped lang="scss">
.imgContain {
  width: 4.69rem;
  height: 4.69rem;
  background: rgba(255, 255, 255, 1);
  border: 0.06px solid rgba(227, 227, 227, 1);
}

.el-form-item {
  display: flex;
  flex-direction: row;
}

.exchangeBox {
  .tabBox {
    background-color: #fff;
    padding: 3rem;
  }

  .good {
    background-color: #fff;
    padding: 2rem 1.85rem;
    margin-top: 2.38rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;

    .imgBoxs {
      object-fit: contain;
      width: 17rem;
      height: 16.88rem;
      background: rgba(255, 255, 255, 1);
      border: 0.06px solid rgba(227, 227, 227, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 3.44rem;
      img{
        width: 17rem;
        height: 16.88rem;
      }
    }

    .detail {
      color: #666;

      .tls {
        font-size: 1rem;
        line-height: 1.88rem;
        padding-bottom: 2.56rem;
      }

      .price {
        font-size: 1.67rem;
        line-height: 3.14rem;
        padding-bottom: 3.13rem;
      }

      .dls {
        font-size: 1rem;
        line-height: 1.88rem;
        cursor: pointer;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
